<template>
  <div class="app-container" style="padding:20px">
    <el-card>
      <el-divider content-position="left">基础信息</el-divider>
      <el-descriptions border>
        <!--<el-row></el-row>-->
        <el-descriptions-item label="档案编号">{{ detailData.descriptionNo }}</el-descriptions-item>
        <el-descriptions-item label="案卷号">{{ detailData.fileCode }}</el-descriptions-item>
        <el-descriptions-item label="档案类别">{{ detailData.folderName }}</el-descriptions-item>
        <el-descriptions-item label="档案级别">{{ detailData.groupName }}</el-descriptions-item>
        <el-descriptions-item label="归档时间">{{ detailData.archiveTime }}</el-descriptions-item>
        <el-descriptions-item label="历史时期">
          <dict-tag :options="dict.type.description_historical_period" :value="detailData.historicalPeriod"/>
        </el-descriptions-item>
        <el-descriptions-item label="载体类型">
          <dict-tag :options="dict.type.carrier_type" :value="detailData.carrierType"/>
        </el-descriptions-item>
        <el-descriptions-item label="文种">
          <dict-tag :options="dict.type.description_record_type" :value="detailData.recordType"/>
        </el-descriptions-item>
        <el-descriptions-item label="数量">{{ detailData.number }}</el-descriptions-item>
        <el-descriptions-item label="单位">
          <dict-tag :options="dict.type.description_unit" :value="detailData.unit"/>
        </el-descriptions-item>
        <el-descriptions-item label="规格">{{ detailData.spec }}</el-descriptions-item>
        <el-descriptions-item label="页数">{{ detailData.paginalNum }}</el-descriptions-item>
        <el-descriptions-item label="主题词">{{ detailData.keyword }}</el-descriptions-item>
        <el-descriptions-item label="提名">{{ detailData.title }}</el-descriptions-item>
        <el-descriptions-item label="备注">{{ detailData.notes }}</el-descriptions-item>
      </el-descriptions>

      <el-divider content-position="left">馆藏信息</el-divider>
      <el-descriptions border>
        <el-descriptions-item label="档案柜">{{ detailData.cabinetId }}</el-descriptions-item>
        <el-descriptions-item label="全宗">{{ detailData.fondCode }}</el-descriptions-item>
        <el-descriptions-item label="保存期限">
          <dict-tag :options="dict.type.description_save_date" :value="detailData.saveDate"/>
        </el-descriptions-item>
        <el-descriptions-item label="发文字号">{{ detailData.dispatchNumber }}</el-descriptions-item>
        <el-descriptions-item label="立卷时间">{{ detailData.filingTime }}</el-descriptions-item>
        <el-descriptions-item label="立卷人">{{ detailData.filingPerson }}</el-descriptions-item>
      </el-descriptions>

      <el-divider content-position="left">案卷立案时间范围</el-divider>
      <el-descriptions border>
        <el-descriptions-item label="案卷立案周期">{{ detailData.timeRange }}</el-descriptions-item>
      </el-descriptions>

      <el-divider content-position="left">扩展索引</el-divider>
      <el-descriptions border>
        <el-descriptions-item label="扩展索引">{{ detailData.extendedIndex }}</el-descriptions-item>
      </el-descriptions>

      <el-divider content-position="left">附件列表</el-divider>
      <am-directory-view ref="AmDirectoryViewRef" />
    </el-card>
  </div>
</template>

<script>
import { getDescription } from "../../../api/am/description";
import {Message} from "element-ui";
import AmFilesUploader from "../../../components/AmComp/AmFilesUploader.vue";
import AmFormHeader from "../../../components/AmComp/AmFormHeader.vue";
import {isEmpty, isNull, isUndefined} from "lodash";
import AmDictSelector from "../../../components/AmComp/AmDictSelector.vue";
import AmGroupSelector from "../amGroup/AmGroupSelector.vue";
import AmFolderTreeSelector from "../amFolder/AmFolderTreeSelector.vue";
import {copyByKey, isValueExist} from "../../../utils/tools";
import AmCabinetTreeSelector from "../amCabinet/AmCabinetTreeSelector.vue";
import AmDirectoryView from "./AmDirectoryView.vue";

console.log(AmDirectoryView);

export default {
  components: {
    AmDirectoryView,
    AmCabinetTreeSelector,
    AmFolderTreeSelector,
    AmGroupSelector,
    AmDictSelector,
    AmFormHeader,
    AmFilesUploader
  },
  dicts: ['description_historical_period', 'description_record_type', 'carrier_type', 'description_save_date', 'description_unit'],
  data() {
    return {
      // 档案分类
      groupList:[],
      // 扩展索引
      extendedIndex: [],
      extendedIndexInputValue: '',
      extendedIndexInputVisible: false,
      // 表单
      detailTemp: {
        timeRange: [],
        groupIds: [],
        selectedFolder: null,
        fileTypes: [],
        fileTypesMap: {},
      },
      detailData: {
        // 主键
        id: '',
        // 案卷号
        fileCode: '',
        // 档案类别
        folderId: '',
        folderName: '',
        // 归档时间
        archiveTime: '',
        // 档案级别
        groupId: '',
        groupName: '',
        // 提名
        title: '',
        // 主题词
        keyword: '',
        // 备注
        notes: '',
        // 档案柜
        cabinetId: '',
        // 全宗
        fondCode: '',
        // 保存期限
        saveDate: '',
        // 发文字号
        dispatchNumber: '',
        // 立卷时间
        filingTime: '',
        // 立卷人
        filingPerson: '',
        // 案卷立案开始时间
        startTime: '',
        // 案卷立案结束时间
        endTime: '',
        // 扩展索引
        extendedIndex: '',
        // 文件
        fileVOS: [],
        // 历史时期
        historicalPeriod: '',
        // 数量
        number: '',
        // 单位
        unit: '',
        // 页数
        paginalNum: '',
        // 载体类型
        carrierType: '',
        // 规格
        spec: '',
        // 文种
        recordType: '',
        // 档案编号
        descriptionNo: '',
      },
      cabinetTree: [],
      readonly: false,
      formColumnConfig: {
        half: {
          xs: 24,
          sm: 12,
          md: 8,
          lg: 8,
        },
        full: {
          xs: 24,
          sm: 12,
          md: 16,
          lg: 16,
        },
      },
    }
  },
  async created() {

  },
  mounted() {
    this.detailData.id = this.$route.params && this.$route.params.id;
    this.detailData.roleId = this.$route.query.roleId;
    this.recoveryDetail();
  },
  methods: {
    async loadFileType() {
      const { data } = await this.getDicts('description_file_type')
      this.detailTemp.fileTypes = data
      this.detailTemp.fileTypesMap = {}
      data.forEach(item => {
        this.detailTemp.fileTypesMap[item.dictValue] = []
      })
    },
    handleFolderChange(folder) {
      this.detailTemp.selectedFolder = folder
      this.noGenerator()
    },
    handleRemoveIndex(index) {
      this.extendedIndex = this.extendedIndex.filter(item => item !== index);
    },
    handleIndexConfirm() {
      const inputValue = this.extendedIndexInputValue
      if (inputValue) {
        if(this.extendedIndex.includes(inputValue)) {
          Message.warning('索引已存在，请勿重复添加');
        } else {
          this.extendedIndex.push(inputValue);
        }
      }
      this.extendedIndexInputVisible = false;
      this.extendedIndexInputValue = '';
    },
    showIndexInput() {
      this.extendedIndexInputVisible = true;
    },
    handleRangeChange() {
      this.detailData.startTime = this.detailTemp.timeRange[0];
      this.detailData.endTime = this.detailTemp.timeRange[1];
    },
    /** 回填表单数据 */
    recoveryDetail() {
      console.log(this.$refs);
      getDescription(this.detailData.id, this.detailData.roleId).then(response => {
        copyByKey(this.detailData, response.data)
        if(!isEmpty(this.detailData.extendedIndex)) {
          this.extendedIndex = this.detailData.extendedIndex.split(',')
        }
        if(!isEmpty(this.detailData.startTime) && !isEmpty(this.detailData.endTime)) {
          this.detailTemp.timeRange = [this.detailData.startTime, this.detailData.endTime]
        }
        this.$refs.AmDirectoryViewRef.recoveryFiles(this.detailData.fileVOS)
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.extend-index-tag{
  height: 32px;
  line-height: 32px;
  & + .extend-index-tag{
    margin-left: 8px;
  }
}
.button-new-tag {
  margin-left: 8px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 8px;
  vertical-align: bottom;
}
</style>
